<template>
    <div class="com_container">
        <div class="com_chart" ref="seller_ref"></div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    // 组件名称
    name: 'sellerChart',
    data() {
        return {
            chartInstance: null,
            allData: [],
            currentPage: 1,
            totalPage: 0,
            timerId: null,
            loading: null
        }
    },
    created() {
        // 注册回调函数
        this.$scoket.registerCallBack('sellerData', this.getData)
    },
    mounted() {
        this.initChart()
        this.loading = this.$loading({
          target:this.$refs.seller_ref,
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        // 获取数据需要使用客户端向服务端发送数据来获取
        this.$scoket.send({
            // 指明此次获取的信息
            action: 'getData',
            socketType: 'sellerData',
            chartName: 'seller',
            value: ''
        })
        window.addEventListener('resize', this.adapter)
        // 第一次加载需要手动调用一次
        this.adapter()
    },
    destroyed() {
        clearInterval(this.timerId)
        window.removeEventListener('resize', this.adapter)
        // 注销回调函数
        this.$scoket.unregisterCallBack('sellerData')

    },
    methods: {
        // 初始化echarts实例对象
        initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.seller_ref, this.theme)
            // 对图表初始化配置
            const initOption = {
                // 设置标题
                title: {
                    text: '商家销售统计',
                    // 标题位移
                    left: 20,
                    top: 5
                },
                // 调整坐标轴位置
                grid: {
                    top: '20%',
                    left: '3%',
                    rigth: '6%',
                    bottom: '3%',
                    // 坐标轴位置是否包含标签区域
                    containLabel: true

                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                },
                // 获取焦点提示
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        z: 0,
                        lineStyle: {
                            color: '#2D3443'
                        }
                    }
                },
                series: [
                    {
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'right',
                            color: 'white'
                        },
                        itemStyle: {
                            // 渐变背景
                            // 先指明位移值，再指明颜色偏移  
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                // 初末的两种颜色值
                                {
                                    offset: 0,
                                    color: '#5052EE'
                                },
                                {
                                    offset: 1,
                                    color: '#AB6EE5'
                                }
                            ])
                        }
                    }
                ]
            }
            this.chartInstance.setOption(initOption)
            // 绑定监听事件
            this.chartInstance.on('mouseover', () => {
                clearInterval(this.timerId)
            })
            this.chartInstance.on('mouseout', () => {
                this.startInterval()
            })
        },
        // 获取服务器数据
        getData(ret) {
            // ws调用getData的时候自动传入图标数据当作形参
            this.allData = ret
            this.allData.sort((a, b) => {
                return a.value - b.value
            })
            this.totalPage = Math.ceil(this.allData.length / 5)
            this.updateChart()
            this.startInterval()
        },
        // 更新图表
        updateChart() {
            const start = (this.currentPage - 1) * 5
            const end = this.currentPage * 5
            // console.log(start,end);
            const curData = this.allData.slice(start, end)
            const sellerNames = curData.map((item) => {
                return item.name
            })
            const sellerValues = curData.map((item) => {
                return item.value
            })
            const dataOption = {
                yAxis: {
                    data: sellerNames
                },
                series: [
                    {
                        data: sellerValues,
                    }
                ]
            }
            if(this.loading){
                this.loading.close()
            }
            this.chartInstance.setOption(dataOption)
        },
        // 更新定时器
        startInterval() {
            if (this.timerId) {
                clearInterval(this.timerId)
            }
            this.timerId = setInterval(() => {
                this.currentPage < this.totalPage ? this.currentPage++ : this.currentPage = 1
                this.updateChart()
            }, 3000)
        },
        // 自适应配置更新
        adapter() {
            const titleFontSize = document.body.clientWidth / 100 * 1.15
            const adaptOption = {
                title: {
                    fontSize: titleFontSize
                },
                toolbar: {
                    axisPointer: {
                        lineStyle: {
                            width: titleFontSize
                        }
                    }
                },
                series: [
                    {
                        barWidth: titleFontSize,
                        itemStyle: {
                            borderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
                        }
                    }
                ]
            }
            this.chartInstance.setOption(adaptOption)
            this.chartInstance.resize()
        }
    },
    computed: {
        ...mapState(['theme'])
    },
    watch: {
        theme() {
            console.log('zhuti');
            this.chartInstance.dispose()
            this.initChart()
            this.adapter()
            this.updateChart()
        }
    }
}
</script> 

<style scoped lang='less'>

</style>
